import { ref, watchEffect, nextTick } from "vue";
import { useElementPlusTheme } from "use-element-plus-theme";
import { colorSchemes } from "@/configs/themeColors";
import { setCSSVar } from "@/utils/dom";
import config from "@/configs/globalConfig";
const { changeTheme: changeElementPlusTheme } = useElementPlusTheme();
const match = matchMedia("(prefers-color-scheme: dark)"); // 是否是深色模式
const theme = ref(""); // 主题
const themeMode = ref(match.matches ? "dark" : "light"); // 亮色/暗色 初始跟随系统

match.addEventListener("change", (e) => {
  themeMode.value = e.matches ? "dark" : "light";
});

watchEffect(() => {
  document.documentElement.setAttribute("data-theme", themeMode.value);
  document.documentElement.classList.remove("light", "dark");
  document.documentElement.classList.add(themeMode.value);
});

watchEffect(() => {
  if (theme.value) {
    document.documentElement.setAttribute("data-themeType", theme.value);
  }
});

const changeThemeMode = (() => {
  if (document.startViewTransition && document.documentElement.animate) {
    return (e, cb) => {
      if (e && typeof e === "object") {
        const { clientX: x, clientY: y } = e;
        const endRadius = Math.hypot(
          Math.max(x, innerWidth - x),
          Math.max(y, innerHeight - y)
        );

        const transition = document.startViewTransition(async () => {
          themeMode.value = themeMode.value === "light" ? "dark" : "light";
          await nextTick();
        });
        transition.ready.then(() => {
          const clipPath = [
            `circle(0px at ${x}px ${y}px)`,
            `circle(${endRadius}px at ${x}px ${y}px)`,
          ];
          const isDark = themeMode.value === "dark";
          document.documentElement.animate(
            {
              clipPath: isDark ? [...clipPath].reverse() : clipPath,
            },
            {
              duration: 450,
              easing: "ease-in",
              pseudoElement: isDark
                ? "::view-transition-old(root)"
                : "::view-transition-new(root)",
            }
          );
          cb && cb(themeMode.value);
        });
      } else {
        themeMode.value = themeMode.value === "light" ? "dark" : "light";
        cb && cb(themeMode.value);
      }
    };
  } else {
    return () => {
      themeMode.value = themeMode.value === "light" ? "dark" : "light";
      cb && cb(themeMode.value);
    };
  }
})();

const updateThemeColor = (themeMode, theme) => {
  const colorScheme = colorSchemes.find((item) => item.value === theme);
  if (colorScheme) {
    const colors = themeMode === "dark" ? colorScheme.dark : colorScheme.light;
    for (const key in colors) {
      setCSSVar(key, colors[key]);
    }
  }
};

export default function useTheme() {
  function toggleThemeMode(e) {
    changeThemeMode(e, (themeMode) => {
      updateThemeColor(themeMode, theme.value);
    });
  }

  function changeTheme(t) {
    theme.value = t;
    updateThemeColor(themeMode.value, theme.value);
  }

  return {
    themeMode,
    theme,
    changeElementPlusTheme,
    toggleThemeMode,
    changeTheme,
  };
}
